<template>
	<div id="home-comment">
		<mu-container>
			<h2 class="text-title">
				<b>{{ videoItem.title }}</b> 的回复
			</h2>
			<mu-linear-progress
				:color="themeColor.progress.color"
			></mu-linear-progress>
		</mu-container>
	</div>
</template>

<script lang="ts">
import { createComponent, ref, computed } from "@vue/composition-api";
import { jsonpComment } from "/services/fetch";
export default createComponent({
	name: "home-comment",
	props: {
		videoItem: {
			type: Object,
			default: () => ({})
		}
	},
	setup(props, ctx) {
		const themeColor = computed(() => ctx.root.$store.state.theme.theme);
		jsonpComment({ id: props.videoItem.id }, (err, data) => {
			if (err) console.log(err);
			console.log(data);
		});
		return {
			themeColor
		};
	}
});
</script>

<style lang="less">
#home-comment {
	margin-top: 35px;
	h2 {
		font-size: 1.5rem;
		font-weight: 200;
		&.text-title {
			padding-left: 15px;
			padding-bottom: 5px;
			b {
				padding-right: 0.6rem;
			}
		}
		&.text-countdown {
			font-weight: 400;
		}
		@media screen and (max-width: 768px) {
			font-size: 1.2rem;
			&.text-title {
				text-align: center;
				padding-left: 0px;
			}
		}
	}
}
</style>
